<template>
	<view>
		<view class="story_category">
			<view v-for="(item,index) in storyCategoryData" :key="index">
				<view class="story_category_item" @click="chooseStoryCategoryItem(item)">
					<image class="story_category_item_image" :src=item.image mode="aspectFill"></image>
					<view class="story_category_item_title"> {{ item.title }} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storyCategoryData:[
					{
						title: "夜听",
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fed%2Fd1%2Faa%2Fedd1aa6f05ceaee8bb8c67f4d45c51c7.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634993944&t=41c617cf9d04310977d34e9566e383c4"
					},
					{
						title: "伴睡",
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fed%2Fd1%2Faa%2Fedd1aa6f05ceaee8bb8c67f4d45c51c7.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634993944&t=41c617cf9d04310977d34e9566e383c4"
					},
					{
						title: "治愈",
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fed%2Fd1%2Faa%2Fedd1aa6f05ceaee8bb8c67f4d45c51c7.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634993944&t=41c617cf9d04310977d34e9566e383c4"
					}
				],
			};
		},
		onLoad() {
			var that = this;
			this.$api.get_sleep_type({name:"yhd",password:"123456"}).then((res)=>{
				that.radioList = res.data;
				console.log(res);
			}).catch((err)=>{
				console.log(err);
			})
		},
		methods: {
			chooseStoryCategoryItem(item) {
				console.log(item);
				uni.navigateTo({
					url:"../storylist/storylist?title="+item.title
				});
			}
		}
	}
</script>

<style lang="scss">
	.story_category {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 30rpx 50rpx 0 50rpx;

		.story_category_item {
			margin-bottom: 50rpx;
			
			.story_category_item_image {
				width: 300rpx;
				height: 168.75rpx;
				border-radius: 10rpx;
			}
			.story_category_item_title {
				margin-top: 10rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}

</style>
